//
//  DataDetailView.swift
//  ShouChong
//
//  Created by 陈友文 on 2024/7/17.
//

import SwiftUI
import Charts

/*
 1.分为 周、月查看
 2.总共统计3个Chart 1-能量值
                  2-次数
                  3-时长
 
 */

struct DataDetailView: View {
    @AppStorage("curren_main_color") var currentMainColor = "color_main_01"
    @ObservedObject var vm:HistoryViewModel = HistoryViewModel()

    let dateTypeList:[DateType] = [
        .weekday,
        .month,
    ]
    @State var dateTypeSelect:DateType = .weekday
    @State var selectDate:Date = Date()
    var body: some View {
        ScrollView(showsIndicators: false, content: {
            DatePicker("选择日期", selection: $selectDate, displayedComponents: [.date])
                .padding(.horizontal,20)
                .padding(.top,10)
                .onChange(of: selectDate) {
                    changeDate()
                }
            Picker("", selection: $dateTypeSelect) {
                ForEach(dateTypeList,id: \.self){ item in
                    Text(item.value)
                }
            }.pickerStyle(.segmented)
                .padding()
                .onChange(of: dateTypeSelect) {
                    changeDate()
                }
            HStack {
                Text(dateTypeSelect == .weekday ? "显示当前这周所有的运动数据" : "显示当前这月所有的运动数据")
                    .modifier(MainTextModifier(fontSize: 13, fontWeight: .medium, foreColor:Color("color_text_black").opacity(0.6)))
                Spacer()
            }
//            .padding(.vertical,2)
            .padding(.horizontal,20)
           
            
            
            GroupBox(label: Text("时长⏳"), content: {
                if vm.chartList.count != 0 {
                    Chart(vm.chartList) { item in
                        BarMark(
                            x: .value("日期",item.id),
                            y: .value("数量", item.duration)
//                            width: 50
                        )
                        .annotation(position: .top) {
                            Text(String(format: "%d", item.duration))
                                .foregroundColor(Color.gray)
                                .font(.system(size: 12, weight: .bold))
                        }
                        .foregroundStyle(.linearGradient(
                            colors: [Color("color_chart_duration_01"),Color("color_chart_duration_02")],
                            startPoint: .bottomLeading,
                            endPoint: .topTrailing)
                        )
                        .cornerRadius(10)
                        .foregroundStyle(Color(currentMainColor))
                    }
                    .aspectRatio(1, contentMode: .fit)
                    .chartXAxis{
                        AxisMarks(values: .automatic(minimumStride: 0,desiredCount: self.vm.chartList.count - 1)) { axisValue in
                            
                            let day = String().date2String(self.vm.chartList[axisValue.index].createDate, dateFormat: .format_dd)
                            AxisValueLabel{
                                Text("\(day)日")
                            }
                        }
                    }
                    .if(self.dateTypeSelect == .month, transform: { view in
                            view.chartScrollableAxes(.horizontal)
                    })
                    .chartXAxisLabel("日期")
                    .chartYAxisLabel("时长(秒)")
                    .frame(height: 300)
                } else {
                    NoDataView()
                }
               
                
            }).padding(.horizontal,10)
            
            GroupBox(label: Text("总次数💪🏻"), content: {
                if vm.chartList.count != 0 {
                    Chart(vm.chartList) { item in
                        BarMark(
                            x: .value("日期",item.id),
                            y: .value("数量", item.count)
//                            width: 50
                        )
                        .annotation(position: .top) {
                            Text(String(format: "%d", item.count))
                                .foregroundColor(Color.gray)
                                .font(.system(size: 12, weight: .bold))
                        }
                        .foregroundStyle(.linearGradient(
                            colors: [Color("color_chart_count_01"),Color("color_chart_count_02")],
                            startPoint: .bottomLeading,
                            endPoint: .topTrailing)
                        )
                        .cornerRadius(10)
                        .foregroundStyle(Color(currentMainColor))
                    }
                    .aspectRatio(1, contentMode: .fit)
                    .chartXAxis{
                        AxisMarks(values: .automatic(minimumStride: 0,desiredCount: self.vm.chartList.count - 1)) { axisValue in
                            
                            let day = String().date2String(self.vm.chartList[axisValue.index].createDate, dateFormat: .format_dd)
                            AxisValueLabel{
                                Text("\(day)日")
                            }
                        }
                    }
                    .if(self.dateTypeSelect == .month, transform: { view in
                            view.chartScrollableAxes(.horizontal)
                    })
                    .chartXAxisLabel("日期")
                    .chartYAxisLabel("次数(次)")
                    .frame(height: 300)
                } else {
                    NoDataView()
                }
                
            }).padding(.horizontal,10)
            
            GroupBox(label: Text("心率❤️"), content: {
                if vm.chartList.count != 0 {
                    Chart(vm.chartList) { item in
                        BarMark(
                            x: .value("日期",item.id),
                            y: .value("数量", item.heartRate)
//                            width: 50
                        )
                        .annotation(position: .top) {
                            Text(String(format: "%d", item.heartRate))
                                .foregroundColor(Color.gray)
                                .font(.system(size: 12, weight: .bold))
                        }
                        .foregroundStyle(.linearGradient(
                            colors: [Color("color_chart_calorie_01"),Color("color_chart_calorie_02")],
                            startPoint: .bottomLeading,
                            endPoint: .topTrailing)
                        )
                        .cornerRadius(10)
                        .foregroundStyle(Color(currentMainColor))
                    }
                    .aspectRatio(1, contentMode: .fit)
                    .chartXAxis{
                        AxisMarks(values: .automatic(minimumStride: 0,desiredCount: self.vm.chartList.count - 1)) { axisValue in
                            
                            let day = String().date2String(self.vm.chartList[axisValue.index].createDate, dateFormat: .format_dd)
                            AxisValueLabel{
                                Text("\(day)日")
                            }
                        }
                    }
                    .if(self.dateTypeSelect == .month, transform: { view in
                            view.chartScrollableAxes(.horizontal)
                    })
                    
                    //                .chartYScale(domain: 0 ... 100)
                    //                .chartXSelection(value: $chartSelection)
                    .chartXAxisLabel("日期")
                    .chartYAxisLabel("心率(分钟)")
                    .frame(height: 300)
                } else {
                    NoDataView()
                }
            }).padding(.horizontal,10)
        })
    }
    
    private func changeDate() {
        self.vm.getHistoryWithDateType(now:self.selectDate,dateType: self.dateTypeSelect)
    }
}
